<template>
  <div>
      表单验证
    <el-form
        ref="userForm"
        :model="userObj"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        style="width: 400px;"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="userObj.name" />
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="userObj.phone" />
      </el-form-item>

      <el-form-item label="工资" prop="money">
        <el-input v-model="userObj.money" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userObj:{},
      rules: {
        name: [
          {required: true, message: '姓名必须填写', trigger: 'blur'},
          {min: 2, max: 5, message: '姓名必须是2-5个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '电话必须填写', trigger: 'blur'},
          {pattern:/^1[35789]\d{9}$/, message: '电话必须以13、15、17、18、19开始的11位数', trigger: 'blur'}
        ],
        money: [
          {required: true, message: '工资必须填写', trigger: 'blur'},
          {pattern:/^\d{4,5}$/, message: '工资必须是4-5位数字', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    submitForm(){
      this.$refs.userForm.validate((valid) => {
        if(valid == true){
          alert("执行操作");
        }
      });


    }
  }
}
</script>

<style scoped>

</style>